<%@page import="helpers.UrlHelper"%>
<%@page import="entities.User"%>
<%@page import="com.google.appengine.api.images.ImagesServiceFactory"%>
<%@page import="com.google.appengine.api.images.ImagesService"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreServiceFactory"%>
<%@page import="com.google.appengine.api.blobstore.BlobstoreService"%>
<%@page import="com.google.appengine.api.blobstore.BlobKey"%>
<%
BlobstoreService blobstoreService = BlobstoreServiceFactory.getBlobstoreService();
ImagesService imagesService = ImagesServiceFactory.getImagesService();
User user = (User) request.getAttribute("user");
%>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="/user/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/user/css/user-profile.css" />
<script type='text/javascript' src="/user/js/jquery.min.js"></script>
<script src="/user/js/bootstrap.min.js"></script>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>

<body>
	<div class="container">
		<div class="container_inner">
        	<header>
            	<div class="row-fluid">
                	<div class="span8">
                    	<div class="left avatar">
                        	<% 
								if (user.getAvatar() != null && !user.getAvatar().isEmpty())  {
									 BlobKey blobKey = new BlobKey(user.getAvatar());
							%>
							<img class="img-polaroid" alt="" src="<%=imagesService.getServingUrl(blobKey) %>=s140-c"><br />
							<% } else { %>							
							<img class="img-polaroid" src="/user/images/icon-author.jpg"  width="140" />
							<% } %>
                            <a href="/profile/change-avatar" class="avatarOverlay" role="button">
                            	<span><span><i class="icon-edit icon-white"></i> Change avatar</span></span>
                            </a>               
                        </div>
                        
                        <h1 class="name"><%=user.getName() %></h1>
                        <h3 class="website"><a href="<%=user.getWebsite()%>"><%=user.getWebsite() %></a></h3>
                        <p><i class="icon"></i> <%=user.getAboutme() %> </p>
                    </div>
                    <div class="span3 offset1">
                    	<h2 class="statistic">Dashboard</h2>
                        <ul>
                        	<li><a href="/">Homepage</a></li>
                        	<li><a href="/profile/edit">Change Profile</a></li>
                            <li><a href="/profile/change-avatar">Change Avatar</a></li>
                            <li><a href="/profile/link/list">My Links</a></li>
                            <li><a href="/profile/link/submit">Submit Link</a></li>
                            <li><a href="/logout">Logout</a></li>
                        </ul>
                    </div>
                </div>                
            </header>
            
            <section id="content">
            	<ul class="nav nav-tabs" id="profileTab">
                    <li><a href="/profile">Profile</a></li>
                    <li><a href="/profile/change-avatar">Change Avatar</a></li>
                    <li><a href="/profile/link/list">My links</a></li>
                    <li><a href="/profile/link/submit">Submit link</a></li>
                </ul>
                
                <div class="tab-content">